<template>
  <el-form :model="formInfo.formData">
    <div v-if="formInfo.collapse">
      <el-collapse v-model="formInfo.collapse.activeName" accordion :class="formInfo.collapse.className">
        <el-collapse-item v-for="(collapse, index) in formInfo.collapse.items" :key="index"
          :title="collapse.title"
          :name="index">
          <el-form-item v-for="(item, index) in collapse.formItems" :key="index" :label="item.label">
            <el-input v-if="item.type === 'input'" v-model="formInfo.formData[item.name]" autocomplete="off"></el-input>
            <el-date-picker
              v-if="item.type === 'datePicker'"
              v-model="formInfo.formData[item.name]"
              value-format="timestamp"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期时间">
            </el-date-picker>
            <el-select v-if="item.type === 'select'" v-model="formInfo.formData[item.name]" placeholder="请选择">
              <el-option v-for="(list, index) in item.options" :key="index" :label="list[item.props.label]" :value="list[item.props.value]"></el-option>
            </el-select>
            <el-cascader
              v-if="item.type === 'cascader'"
              v-model="formInfo.formData[item.name]"
              :show-all-levels="item.showAllLevels"
              :options="item.options"
              :props="item.props"
              placeholder="请选择"
              filterable
              clearable>
            </el-cascader>
            <el-radio-group v-if="item.type === 'radioGroup'" v-model="formInfo.formData[item.name]" size="medium">
              <el-radio-button v-for="(list, index) in item.option" :key="index" :label="list"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-else>
      <el-form-item v-for="(item, index) in formInfo.formItems" :key="index" :label="item.label">
        <el-input v-if="item.type === 'input'" v-model="formInfo.formData[item.name]" autocomplete="off"></el-input>
        <el-date-picker
          v-if="item.type === 'datePicker'"
          v-model="formInfo.formData[item.name]"
          value-format="timestamp"
          format="yyyy 年 MM 月 dd 日"
          placeholder="选择日期时间">
        </el-date-picker>
        <el-select v-if="item.type === 'select'" v-model="formInfo.formData[item.name]" placeholder="请选择">
          <el-option v-for="(list, index) in item.options" :key="index" :label="list[item.props.label]" :value="list[item.props.value]"></el-option>
        </el-select>
        <el-cascader
          v-if="item.type === 'cascader'"
          v-model="formInfo.formData[item.name]"
          :show-all-levels="item.showAllLevels"
          :options="item.options"
          :props="item.props"
          placeholder="请选择"
          filterable
          clearable>
        </el-cascader>
        <el-radio-group v-if="item.type === 'radioGroup'" v-model="formInfo.formData[item.name]" size="medium">
          <el-radio-button v-for="(list, index) in item.option" :key="index" :label="list"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    formInfo: {
      type: Object,
      default: () => {
        return {
          formData: {
            identityNumber: '22152136223',
            name: 'name'
          },
          collapse: {
            activeName: '1',
            className: 'custom-collapse-style',
            items: [
              {
                title: '户籍基本信息',
                formItems: [
                  {label: '公民身份证号：', type: 'input', name: 'identityNumber'},
                  {label: '出生日期：', type: 'datePicker', name: 'birthday'},
                  {label: '姓名：', type: 'input', name: 'name'},
                  {label: '籍贯：', type: 'input', name: 'birthplace'},
                  {
                    label: '性别：',
                    type: 'select',
                    name: 'gender',
                    props: {label: 'name', value: 'code'},
                    option: [
                      {name: '男', code: '0'},
                      {name: '女', code: '1'},
                      {name: '未说明', code: '2'}
                    ]
                  },
                  {
                    label: '民族：',
                    type: 'select',
                    name: 'nation',
                    props: {label: 'name', value: 'code'},
                    option: [
                      {name: '汉族', code: '1'},
                      {name: '回族', code: '2'}
                    ]
                  },
                  {
                    label: '婚姻状况：',
                    type: 'cascader',
                    name: 'maritalStatusArr',
                    showAllLevels: false,
                    props: {label: 'name', value: 'code'},
                    option: [
                      {name: '已婚', code: '1'},
                      {name: '未婚', code: '2'}
                    ]
                  },
                  {
                    label: '居住地类型：',
                    type: 'radioGroup',
                    name: 'placeType',
                    option: ['小区', '院落']
                  }
                ]
              }
            ]
          },
          formItems: [
            {label: '公民身份证号：', type: 'input', name: 'identityNumber'},
            {label: '出生日期：', type: 'datePicker', name: 'birthday'},
            {label: '姓名：', type: 'input', name: 'name'},
            {label: '籍贯：', type: 'input', name: 'birthplace'},
            {
              label: '性别：',
              type: 'select',
              name: 'gender',
              props: {label: 'name', value: 'code'},
              option: [
                {name: '男', code: '0'},
                {name: '女', code: '1'},
                {name: '未说明', code: '2'}
              ]
            },
            {
              label: '民族：',
              type: 'select',
              name: 'nation',
              props: {label: 'name', value: 'code'},
              option: [
                {name: '汉族', code: '1'},
                {name: '回族', code: '2'}
              ]
            },
            {
              label: '婚姻状况：',
              type: 'cascader',
              name: 'maritalStatusArr',
              showAllLevels: false,
              props: {label: 'name', value: 'code'},
              option: [
                {name: '已婚', code: '1'},
                {name: '未婚', code: '2'}
              ]
            },
            {
              label: '居住地类型：',
              type: 'radioGroup',
              name: 'placeType',
              option: ['小区', '院落']
            }
          ]
        }
      }
    }
  },
  data () {
    return {

    }
  }
}
</script>
